<template>
  <div class="app-container">
    <div class="cardPadding">
      <el-card style="width: 100%; margin-bottom: 4px">
        <el-tabs v-model="activityName" class="demo-tabs">
          <el-tab-pane label="未分配方案列表" name="first">
            <carryOut
              v-if="activityName == 'first'"
              @queryParamsDate="queryParamsDate"
              :stepId="2"
            />
          </el-tab-pane>
          <el-tab-pane label="已分配方案列表" name="second">
            <carryOut v-if="activityName == 'second'" @queryParamsDate="queryParamsDate" :stepId="3" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    <el-card style="width: 100%">
      <el-tabs v-model="activityNameBottom" class="demo-tabs" @tab-change="tabChange">
        <el-tab-pane label="方案视图" name="first">
          <scheme
            v-if="activityNameBottom == 'first'"
            ref="schemeRef"
            :projectData="projectData"
            :queryParams="queryParams"
          />
        </el-tab-pane>
        <el-tab-pane label="日历视图" name="second">
          <calendar ref="calendarRef" v-if="activityNameBottom == 'second'" :queryParams="queryParams" />
        </el-tab-pane>
        <el-tab-pane label="人员视图" name="three">
          <user ref="userRef" v-if="activityNameBottom == 'three'" :queryParams="queryParams" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    </div>
  </div>
</template>

<script setup name="ProjectPlan">
import carryOut from "./components/carryOut";
import scheme from "./components/scheme";
import calendar from "./components/calendar";
import user from "./components/user";

const activityName = ref("first");
const activityNameBottom = ref("first");
const projectData = ref({});
const queryParams = ref({});
const schemeRef = ref(null)
const calendarRef = ref(null)
const userRef = ref(null)

function queryParamsDate(val) {
  queryParams.value = val;
  nextTick(() => {
    if (activityNameBottom.value=="first") {
      schemeRef.value.getList()
    } else if(activityNameBottom.value=="second") {
      calendarRef.value.getCalendar()
    } else {
      userRef.value.getUserView()
    }
  })
}

function tabChange(name) {
  if (name == "first") {
    nextTick(() => {
      schemeRef.value.getList()
    })
  }
}
</script>
